<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="180"
      @close="btnclose"
    >
      <div class="topPreview">
        <el-row style="margin-bottom:20px">
          <span style="margin-right:90px">【题型】:{{ detailQuestionList.questionType }}</span>
          <span style="margin-right:90px">【编号】:{{ detailQuestionList.id }}</span>
          <span style="margin-right:90px">【难度】:{{ detailQuestionList.difficulty }}</span>
          <span style="margin-right:90px">【标签】:{{ detailQuestionList.tags }}</span>
        </el-row>
        <el-row style="margin-bottom:20px">
          <span style="margin-right:90px">【学科】:{{ detailQuestionList.subject }}</span>
          <span style="margin-right:90px">【目录】:{{ detailQuestionList.catalog }}</span>
          <span style="margin-right:90px">【方向】:{{ detailQuestionList.direction }}</span>
        </el-row>
        <hr>
        <el-row>
          <span>【题干】:</span>
          <div v-html="detailQuestionList.question" />
          <div v-if="detailQuestionList.questionType==1">单选题选项:(以下选中的选项为正确答案)</div>
          <div v-if="detailQuestionList.questionType==2">多选题选项:(以下选中的选项为正确答案)</div>
          <div v-if="detailQuestionList.questionType==3">简答题:</div>
          <!-- 单选题 -->
          <div v-if="detailQuestionList.questionType==1" style="margin-top:10px">
            <el-radio-group v-model="radio">
              <el-radio v-for="item,index in options" :key="index" style="display:block;margin-bottom:10px" :label="item.code">{{ item.title }}</el-radio>
            </el-radio-group>
          </div>
          <!-- 多选题 -->
          <div v-if="detailQuestionList.questionType==2" style="margin-top:10px">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item,index in options" :key="index" style="display:block;margin-bottom:10px" :label="item.code" />
            </el-checkbox-group>
          </div>
          <!-- 简答 -->
          <div>简答题：</div>
        </el-row>
        <hr>
        <el-row>
          <span>【参考答案】:</span> <el-button type="danger" size="medium" @click="toVideoURL">视频答案解析</el-button>
          <div style="width:350px;height:250px;margin-top:10px">
            <meta name="referrer" content="never">
            <video autoplay style="width:100%;height:100%" :src="videoUrl" />
          </div>
        </el-row>
        <hr>
        <el-row style="margin-bottom:20px;margin-top:20px">
          <span>【答案解析】:</span>
          <span v-html="detailQuestionList.answer" />
        </el-row>
        <hr>
        <el-row>
          <span>【题目备注】:</span>
          <span>{{ detailQuestionList.remarks }}</span>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="btnclose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    props: {
        dialogVisible: {
        type: Boolean,
        default: false
        }
  },
    data() {
      return {
        videoUrl: '',
        radio: '',
        checkList: [],
        detailQuestionList: '',
        options: []
      }
    },
  watch: {
    options(newval, oldval) {
      if (newval) {
        if (this.detailQuestionList.questionType == 1) {
          newval.forEach(item => {
      if (item.isRight == 1) {
          this.radio = item.code
        }
    })
        }
        // 多选
      else if (this.detailQuestionList.questionType == 2) {
          newval.forEach(item => {
      if (item.isRight == 1) {
          this.checkList.push(item.code)
        }
    })
        }
      }
    }
    },
  updated() {
    console.log(this.detailQuestionList.options, '-=-=-=-=-=-=-=-=-=-')
    this.options = this.detailQuestionList.options
    },
  methods: {
    toVideoURL() {
      this.videoUrl = this.detailQuestionList.videoURL
    },
    // 关闭弹窗
    btnclose() {
      this.$emit('update:dialogVisible', false)
    }

  }
  }
</script>

<style lang="scss">
.el-dialog__wrapper {
     .el-dialog {
     overflow: hidden;
     border-radius: 10px;
     .el-dialog__header {
     background: #409eff;
     .el-dialog__title {
     color: white;
     }
     .el-icon-close::before {
     color: white;
     }
     }
    }
    }
</style>